// ImageUploader 组件自定义上传使用示例

// 示例1: 使用 action 属性指定上传地址
import React from 'react';
import { ImageUploader } from '@your-username/my-react-component';

function ActionExample() {
  // 上传成功回调
  const handleUploadSuccess = (response, fileList) => {
    console.log('上传成功:', response);
    console.log('上传的文件:', fileList);
    // response 是服务器返回的数据
    // 可以从中获取图片URL等信息
  };

  // 上传失败回调
  const handleUploadError = (error) => {
    console.error('上传失败:', error);
  };

  return (
    <ImageUploader 
      buttonText="上传图片到服务器"
      modalTitle="图片上传"
      // 指定上传地址
      action="https://your-api.com/upload"
      // 添加请求头
      headers={{
        'Authorization': 'Bearer your-token',
        'X-Custom-Header': 'custom-value'
      }}
      // 添加额外参数
      data={{
        category: 'user-avatar',
        userId: '12345'
      }}
      // 是否携带凭证
      withCredentials={true}
      // 上传成功回调
      onUploadSuccess={handleUploadSuccess}
      // 上传失败回调
      onUploadError={handleUploadError}
    />
  );
}

// 示例2: 使用 customRequest 自定义上传逻辑
function CustomRequestExample() {
  // 自定义上传逻辑
  const customUploadRequest = ({ fileList, onSuccess, onError }) => {
    // 这里可以使用 fetch、axios 或其他 HTTP 客户端
    const formData = new FormData();
    
    // 添加文件到表单数据
    fileList.forEach(file => {
      formData.append('images', file.originFileObj);
    });
    
    // 添加额外参数
    formData.append('category', 'gallery');
    formData.append('userId', '12345');
    
    // 发起上传请求
    fetch('https://your-api.com/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Authorization': 'Bearer your-token'
      }
    })
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Upload failed');
    })
    .then(data => {
      // 上传成功
      onSuccess(data);
    })
    .catch(error => {
      // 上传失败
      onError(error);
    });
  };

  const handleUploadSuccess = (response, fileList) => {
    console.log('上传成功:', response);
    console.log('上传的文件:', fileList);
    
    // 假设服务器返回格式如下:
    // {
    //   "success": true,
    //   "data": {
    //     "urls": ["https://example.com/image1.jpg", "https://example.com/image2.jpg"]
    //   }
    // }
    
    if (response.success && response.data.urls) {
      // 处理返回的图片URL
      response.data.urls.forEach((url, index) => {
        console.log(`图片${index + 1}的URL:`, url);
      });
    }
  };

  const handleUploadError = (error) => {
    console.error('上传失败:', error);
  };

  return (
    <ImageUploader 
      buttonText="自定义上传"
      modalTitle="自定义上传示例"
      // 使用自定义上传逻辑
      customRequest={customUploadRequest}
      onUploadSuccess={handleUploadSuccess}
      onUploadError={handleUploadError}
    />
  );
}

// 示例3: 使用 axios 进行自定义上传
import axios from 'axios';

function AxiosExample() {
  const customUploadRequest = async ({ fileList, onSuccess, onError }) => {
    try {
      const formData = new FormData();
      
      // 添加文件
      fileList.forEach(file => {
        formData.append('images', file.originFileObj);
      });
      
      // 添加额外参数
      formData.append('category', 'product-images');
      
      // 使用 axios 发起请求
      const response = await axios.post('https://your-api.com/upload', formData, {
        headers: {
          'Authorization': 'Bearer your-token',
          'Content-Type': 'multipart/form-data'
        },
        // 上传进度回调（可选）
        onUploadProgress: (progressEvent) => {
          // 可以在这里处理上传进度
          const { loaded, total } = progressEvent;
          const percent = Math.round((loaded / total) * 100);
          console.log(`上传进度: ${percent}%`);
        }
      });
      
      // 上传成功
      onSuccess(response.data);
    } catch (error) {
      // 上传失败
      onError(error);
    }
  };

  const handleUploadSuccess = (response, fileList) => {
    console.log('上传成功:', response);
    
    // 处理返回的数据
    if (response && response.imageUrls) {
      // 更新UI显示上传的图片
      // setImageList(response.imageUrls);
    }
  };

  return (
    <ImageUploader 
      buttonText="Axios上传"
      modalTitle="使用Axios上传"
      customRequest={customUploadRequest}
      onUploadSuccess={handleUploadSuccess}
    />
  );
}

// 完整使用示例
import ReactDOM from 'react-dom/client';
import { Card, ImageUploader } from './dist/my-react-component.js';
import './dist/my-react-component.css';

function CompleteExample() {
  // 使用上传地址的方式
  const handleActionUploadSuccess = (response, fileList) => {
    console.log('通过action上传成功:', response);
    // 处理服务器返回的数据
  };

  // 使用自定义请求的方式
  const customUploadRequest = ({ fileList, onSuccess, onError }) => {
    // 模拟异步上传
    setTimeout(() => {
      // 模拟上传成功
      const mockResponse = {
        success: true,
        imageUrls: fileList.map((file, index) => 
          `https://example.com/uploaded-image-${Date.now()}-${index}.jpg`
        )
      };
      onSuccess(mockResponse);
    }, 2000);
  };

  const handleCustomUploadSuccess = (response, fileList) => {
    console.log('自定义上传成功:', response);
    // 使用返回的图片URL更新UI
    if (response.success && response.imageUrls) {
      // setImages(response.imageUrls); // 假设有状态管理
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>ImageUploader 组件上传示例</h1>
      
      <Card title="使用 action 属性上传" style={{ marginBottom: '20px' }}>
        <ImageUploader 
          buttonText="上传到指定地址"
          action="https://your-api.com/upload"
          headers={{ 'Authorization': 'Bearer your-token' }}
          data={{ category: 'avatar' }}
          onUploadSuccess={handleActionUploadSuccess}
        />
      </Card>

      <Card title="使用自定义上传逻辑" style={{ marginBottom: '20px' }}>
        <ImageUploader 
          buttonText="自定义上传"
          customRequest={customUploadRequest}
          onUploadSuccess={handleCustomUploadSuccess}
        />
      </Card>
    </div>
  );
}

export default CompleteExample;